<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <head> <style type="text/css">
            html, 
body
{
    height: 100%;
    background:#fff url(solenuvola.jpg) no-repeat center center;
    background-size:cover;
    box-shadow:inset 0 -1px 5px rgba(0,0,0,0.6);
}
        </style>
        <title>Your HomePage   
        </title>
    </head>
    <body>
         <div id="meteoCalLogo" style="position: absolute; top: 50px; right: 50px;">
                        <a href='#'><img src='webapp/images/logo.png' alt="logo"/>
                        </a>
                </div>
         <div id='title' style="font-size: 40px; color: blue; font-family: cursive; top: 0px; left: 0px;" >
                <p> MeteoCal</p> 
         </div>
        <div style="font-size:20px; background-color: chartreuse; position: absolute; top:100px"> <p>Now you are logged, Welcome #{LoginBean.username}</p> </div>
        <div style="font-size: 20px; background-color: #59b4d4; color: lightyellow; position:absolute; top: 200px; ">
            <h:link outcome="#{LoginBean.logout()}" value="Logout"/>
            </div>
        
                     <h:form id="searchEventForm" style="background-color: goldenrod; color:white; width: content-box; height: content-box; top:120px; right:20px;">
            <p:panel style="background-color: goldenrod; color:white; overflow: auto; alignment-adjust: middle; width: content-box;position:absolute; height: content-box; top:120px; right:20px;" header=" SEARCH THE BEST PUBLIC EVENT FOR YOU!">
                <b> <u> Fill this form to display the event closest to your preferences </u> </b> 
                <h:panelGrid columns="3" id="GridSearchEvent">
                    <h:outputLabel for="eventname">Event Name:</h:outputLabel>
                    <p:inputText id="eventname" value="#{EventSearchBean.event.eventName}" required="true" requiredMessage="Mandatory parameter." />
                    <p:message id="eventnamemsg" for="eventname" />
                    
                    <h:outputLabel for="dataevento"> Date of the event (First day if there are more than one day):</h:outputLabel>
                    <p:calendar id="dataevento" value="#{EventSearchBean.event.dataEvento}" mindate="#{EventSearchBean.today}" required="true" requiredMessage="Mandatory parameter; if you don't know the event date, insert today date." />
                    <p:message id="dataeventomsg" for="dataevento" />
                    
                    <h:outputLabel for="place">Where event will take place?</h:outputLabel>
                    <p:inputText id="place" value="#{EventSearchBean.event.place}" required="true" requiredMessage="Mandatory, parameter." />
                    <p:message id="placemsg" for="place" />
                   
                </h:panelGrid>
            </p:panel>
                         <p:commandButton id="submitevent" style="background-color: goldenrod; color:white; position:absolute; top:235px; right:430px;" action="#{EventSearchBean.performResearch()}" value="Submit Event Research" update="eventname, place, dataevento, eventnamemsg, placemsg, dataeventomsg"/>
        </h:form>
        
        <h:link outcome="settings" style="position:absolute; top: 225px; font-size: 20px; background-color: chocolate; color: lightyellow " value="Change privacy of your calendar and manage your profile" />
     <h:link outcome="eventcreation" style="position:absolute; top: 250px; font-size: 20px; background-color: chocolate; color: lightyellow " value="Your Calendar: create, delete and manage your events!" />
    </body>
</html>
